<%@ page contentType="text/html" pageEncoding="UTF-8" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<c:set var="contextPath"
	value="${pageContext.servletContext.contextPath}" />
<!doctype html>
<html lang="en">
<head>
<title>Destinations by name</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="${contextPath}/styles/default.css" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css"
	type="text/css" media="all" />
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.19/jquery-ui.min.js"></script>
<c:if test="${language != 'en'}">
	<script
		src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/i18n/jquery-ui-i18n.min.js"></script>
</c:if>
<script src="${contextPath}/scripts/jquery.tablesorter.min.js"></script>
<style>
tbody tr td {
	text-align: right;
}

th {
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 10px;
}

th.header {
	background-image: url(${contextPath}/images/notsorted.png);
}

th.headerSortUp {
	background-image: url(${contextPath}/images/up.png);
}

th.headerSortDown {
	background-image: url(${contextPath}/images/down.png);
}
</style>
</head>
<body>
	<header>
		<c:import url="/WEB-INF/JSP/menu.jsp" />
		<h1>Destinations by name</h1>
	</header>
	<form:form method="get" commandName="tripsSearchForm">
		<form:label path="destination">Destination
		<c:if test="${empty param.destination}"> (type first letters)</c:if>
			<form:errors path="destination" cssClass="error" />
			<form:input path="destination" value="${param.destination}" />
		</form:label>
		<form:label path="departureLocation">Departure city
		<c:if test="${empty param.departureLocation}"> (type first letters)</c:if>
			<form:errors path="departureLocation" cssClass="error" />
			<form:input path="departureLocation"
				value="${param.departureLocation}" />
		</form:label>
		<label for="departureDate">Departure date <form:errors
				path="period.departureDate" cssClass="error" /> <form:input
				path="period.departureDate" id="departureDate" />
		</label>
		<label for="returnDate">Return date <form:errors
				path="period.returnDate" cssClass="error" /> <form:errors
				path="period.retunrDateOnOrAfterDepartureDate" cssClass="error" />
			<form:input path="period.returnDate" id="returnDate" />
		</label>
		<form:label path="seats">Seats<form:errors path="seats"
				cssClass="error" />
			<form:input path="seats" />
		</form:label>
		<input type="submit" value="Search trips" name="searchTrips" />
		<form:errors />
	</form:form>
	<c:if test="${not empty trips}">
		<c:set var="sortMessage" value="Click to sort on this column" />
		<table id="trips">
			<thead>
				<tr>
					<th title="${sortMessage}">Departure date</th>
					<th title="${sortMessage}">Return date</th>
					<th title="${sortMessage}">Number of days</th>
					<th title="${sortMessage}">Price per person</th>
					<th title="${sortMessage}">Available seats</th>
					<th>Book</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="trip" items="${trips}">
					<tr>
						<td><spring:eval expression="trip.period.departureDate" /></td>
						<td><spring:eval expression="trip.period.returnDate" /></td>
						<td>${trip.period.numberOfDays}</td>
						<td><spring:eval expression="trip.grossPricePerPerson" /></td>
						<td>${trip.availableSeats}</td>
						<td><c:if test="${trip.availableSeats != 0}">
								<c:url value="/bookings/create" var="bookingURL">
									<c:param name="trip" value="${trip.id}" />
									<c:param name="seats" value="${param.seats}" />
								</c:url>
							</c:if> <a href="${bookingURL}">Book</a></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</c:if>
	<c:if test="${not empty noTripsFound}">
		<div class="error">No trips found</div>
	</c:if>
	<c:url var="destinationNamesURL" value="/destinations/names" />
	<c:url var="departureLocationNamesURL" value="departurelocations/names" />
	<script>
		$(function() {
			$.tablesorter.addParser({
				id : 'myDateFormat',
				is : function(s) {
					return false;
				},
				type : 'numeric',
				format : function(s, table, cell, cellIndex) {
					var dateSplitted = s.split('/');
					var theDate;
					if ("${pattern}".slice(0, 1) === "d") {
						theDate = new Date(dateSplitted[2], dateSplitted[1],
								dateSplitted[0]);
					} else {
						theDate = new Date(dateSplitted[2], dateSplitted[0],
								dateSplitted[1]);
					}
					return theDate;
				}
			});
			$.tablesorter.addParser({
				id : 'myPriceFormat',
				is : function(s) {
					return false;
				},
				type : 'numeric',
				format : function(s, table, cell, cellIndex) {
					if ("${pattern}".slice(0, 1) === "d") {
						return new Number(s.replace(".", ""));
					} else {
						return new Number(s.replace(",", ""));
					}
				}
			});

			$("#trips").tablesorter({
				headers : {
					0 : {
						sorter : 'myDateFormat'
					},
					1 : {
						sorter : 'myDateFormat'
					},
					3 : {
						sorter : 'myPriceFormat'
					},
					5 : {
						sorter : false
					}
				}
			});
			var destination = $("#destination");
			destination.autocomplete({
				source : "${destinationNamesURL}"
			});
			var departureLocationName = $("#departureLocation");
			departureLocationName.autocomplete({
				source : "${departureLocationNamesURL}"
			});
			$.datepicker.setDefaults($.datepicker.regional["${language}"]);
			$("#departureDate,#returnDate").datepicker({
				changeYear : true,
				dateFormat : "${pattern}",
				minDate : 1
			});
			if (destination.val() === "") {
				destination.focus();
			} else if (departureLocationName.val() === "") {
				departureLocationName.focus();
			}
		});
	</script>
</body>
</html>
